<!--
 * @Description: 外协业务结算
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 15:09:56
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <!-- 导航 -->
        <div class="tabtop">
          <div v-for="(item, index) in navlist" :key="index" @click="choose(item.id)">
            <div :class="currenindex == index + 1 ? 'active' : 'text'">{{ item.value }}</div>
            <div v-if="currenindex !== index + 1 && currenindex !== index + 2 && index !== 2" class="hr"></div>
          </div>
        </div>
        <!-- 搜索条件 -->
        <div v-loading="pagesLoading">
          <!-- 折叠 -->
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <!-- 搜索内容 -->
          <el-collapse-transition>
            <div v-show="showCardNav" style="padding-top:18px">
              <el-form :inline="true" label-width="110px">
                <!-- 搜索条件1 -->
                <el-form-item v-if="currenindex==1" label-width="160px">
                  <span slot="label">外协单位</span>
                  <div style="width:240px;height:36px;display:flex;">
                    <div :title="searchText" style="width:180px;padding:0 10px;border-bottom: 1px solid #bbb;margin-right:5px;" class="ellipsis">{{searchText}}</div>
                    <el-button class="bottom_all_two" @click="getsearchData(),search=true">选择</el-button>
                  </div>
                </el-form-item>
                <el-form-item v-if="currenindex==1">
                  <span slot="label">结算时间段</span>
                  <el-date-picker v-model="datePicker" style="height:36px" type="datetimerange" unlink-panels align="right" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['12:00:00', '08:00:00']" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
                <!-- 搜索条件2 -->
                <el-form-item v-if="currenindex==2">
                  <span slot="label">外协单位</span>
                  <el-select v-model="tableParam.outsourcingUnitId" placeholder="请选择">
                    <el-option v-for="(item,index) in SupplierList" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="currenindex==2">
                  <span slot="label">结算单号</span>
                  <el-input v-model="tableParam.code" placeholder="请输入" clearable @keyup.enter.native="pagesgettableData()"></el-input>
                </el-form-item>
                <el-form-item v-if="currenindex==2">
                  <span slot="label">生产日期</span>
                  <el-date-picker v-model="datePicker" style="height:36px" type="datetimerange" unlink-panels align="right" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['12:00:00', '08:00:00']" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
                <!-- 搜索条件3 -->
                <el-form-item v-if="currenindex==3">
                  <span slot="label">结算单号</span>
                  <el-input v-model="tableParam.id" placeholder="请输入" clearable @keyup.enter.native="pagesgettableData()"></el-input>
                </el-form-item>
                <el-form-item v-if="currenindex==3">
                  <span slot="label">外协单位</span>
                  <el-select v-model="tableParam.supplierId" placeholder="请选择">
                    <el-option v-for="(item,index) in SupplierList" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="currenindex==3">
                  <span slot="label">提交时间</span>
                  <el-date-picker v-model="datePicker" style="height:36px" type="datetimerange" unlink-panels align="right" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['12:00:00', '08:00:00']" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), pagesgettableData()">查 询</el-button>
                  <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <!-- 页面内容区 -->
          <div class="card" :style="currenindex!==1?'padding-top:10px':''">
            <!-- 页面功能按钮区 -->
            <div v-show="currenindex==1" class=" card_nav">
              <div>
                <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHENGCJSD'))!==-1" size="small" class="bottom_three" :disabled="generate.list.length==0" @click="statements()">
                  生成结算单
                </el-button>
              </div>
              <div>
              </div>
            </div>
            <!-- 表格数据 -->
            <div v-loading="tableLoading" class="card_info" :style="style">
              <el-table ref="table" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark" @selection-change="tableChange">
                <el-table-column v-if="currenindex==1" align="center" type="selection"></el-table-column>
                <template v-for="(item, index2) in table">
                  <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                    <template slot-scope="scope">
                      <div v-if="item.label == '浇筑方式'">
                        <div v-for="(item1,index1) in scope.row.list" :key="index1">
                          {{item1[item.prop]}}
                        </div>
                      </div>
                      <div v-else-if="item.label == '结算单号'" class="table_link" @click="show( scope.row)">
                        {{ scope.row[item.prop] }}
                      </div>
                      <div v-else-if="item.label == '高度/臂长(米)'">
                        <div v-for="(item1,index1) in scope.row.list" :key="index1">
                          {{item1[item.prop]}}
                        </div>
                      </div>
                      <div v-else-if="item.label == '浇筑量（方）'">
                        <div v-for="(item1,index1) in scope.row.list" :key="index1">
                          {{item1[item.prop]}}
                        </div>
                      </div>
                      <div v-else-if="item.label == '泵送单价(元/方)'">
                        <div v-for="(item1,index1) in scope.row.list" :key="index1">
                          {{item1[item.prop]}}
                        </div>
                      </div>
                      <div v-else-if="item.label == '泵送时间'">
                        <div v-for="(item1,index1) in scope.row.list" :key="index1">
                          {{item1[item.prop]}}
                        </div>
                      </div>
                      <div v-else-if="item.label == '泵送费用（元）'">
                        <div v-for="(item1,index1) in scope.row.list" :key="index1">
                          {{item1[item.prop]}}
                        </div>
                      </div>
                      <div v-else-if="item.label == '序号'">
                        {{scope.$index+1}}
                      </div>
                      <span v-else-if="item.label == '结算时间段'">
                        {{scope.row.settlementPeriod}}
                      </span>
                      <span v-else-if="item.label == '内部审核状态'">
                        {{scope.row.auditStatus==1?'待提交':scope.row.auditStatus==2?'审核中':scope.row.auditStatus==3?'通过':'未通过'}}
                      </span>
                      <span v-else-if="item.label == '操作'">
                        <el-button v-if="scope.row.auditStatus==3" class="bottom_one" size="mini" @click="userSubmit(scope.row)">
                          发送
                        </el-button>
                        <el-button v-if="scope.row.auditStatus==1" size="mini" class="bottom_one" @click="$router.push({name: 'sign_Wise_contactsbusiness1', query: { id: scope.row.id, type: 1 } })">提交审核</el-button>
                      </span>
                      <span v-else-if="item.label == '供应商确认'">
                        {{scope.row.outerStatus==1?'待审核':scope.row.outerStatus==2?'通过':'未发送'}}
                      </span>
                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
        </div>
      </el-main>
      <div v-if="currenindex!==1" class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="pagesgettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="pagesgettableData()">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 选择供应商合同 -->
    <el-dialog v-dialogDrag :visible.sync="search" width="680px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">选择原物料运输供应商</span>
      <div class="dialoginfo">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="searchData" tooltip-effect="dark" @row-click='setradio'>
          <el-table-column align="center" label="选择">
            <template slot-scope="scope">
              <el-radio :value="searchradio" :label="JSON.stringify(scope.row)">{{''}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" label="原物料运输合同编号" prop="contractNumber"></el-table-column>
          <el-table-column align="center" label="单位名称" prop="supplierName"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="search=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="submitsearch">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 外协业务结算 -->
    <el-dialog v-dialogDrag :visible.sync="billDeta" width="1180px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">外协业务结算</span>
      <div ref="html" style="padding:10px 20px">
        <div class="bill_top">
          <span><span class="text">外协单位：</span>{{billDetails.outsourcingUnit}}</span>
          <span><span class="text">结算时间段：</span>{{billDetails.createTime}}至{{billDetails.updateTime}}</span>
          <span><span class="text">结算单编号：</span>{{billList.balanceNo}}</span>
        </div>
        <div class="bill_title1">混凝土结算：</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billList.hunPrice" tooltip-effect="dark">
          <el-table-column label="产品名称" align="center" prop="productName"></el-table-column>
          <el-table-column label="签收量（方）" align="center" prop="signForNum"></el-table-column>
          <el-table-column label="基本单价 (元)" align="center" prop="price"></el-table-column>
          <el-table-column label="结算单价（元）" align="center" prop="">
            <template slot-scope="scope">
              <el-input v-model="scope.row.settlementPrice" type="Number" style="width:100%" placeholder="请输入" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center">
            <template slot-scope="scope">
              {{scope.row.settlementMoney=Number(scope.row.signForNum) * Number(scope.row.settlementPrice) }}
            </template>
          </el-table-column>
        </el-table>
        <div v-if="billList.hunPrice.length!==0" class="combined">小计：结算金额【{{combined(billList.hunPrice)}}】</div>
        <div class="bill_title1">运输结算：</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billList.yunPrice" tooltip-effect="dark">
          <el-table-column label="运输方量(方)" align="center" prop="signForNum"></el-table-column>
          <el-table-column label="基本单价（元/方）" align="center" prop="price"></el-table-column>
          <el-table-column label="结算单价（元）" align="center" prop="">
            <template slot-scope="scope">
              <el-input v-model="scope.row.settlementPrice" type="Number" style="width:100%" placeholder="请输入" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="">
            <template slot-scope="scope">
              {{scope.row.settlementMoney=Number(scope.row.signForNum) * Number(scope.row.settlementPrice) }}
            </template>
          </el-table-column>
        </el-table>
        <div v-if="billList.yunPrice.length!==0" class="combined">小计：结算金额【{{combined(billList.yunPrice)}}】</div>
        <div class="bill_title1">泵送结算：</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billList.pumpPrice" tooltip-effect="dark">
          <el-table-column label="泵送方量(方)" align="center" prop="signForNum"></el-table-column>
          <el-table-column label="基本单价（元/方）" align="center" prop="price"></el-table-column>
          <el-table-column label="结算单价（元）" align="center" prop="">
            <template slot-scope="scope">
              <el-input v-model="scope.row.settlementPrice" type="Number" style="width:100%" placeholder="请输入" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="">
            <template slot-scope="scope">
              {{scope.row.settlementMoney=Number(scope.row.signForNum) * Number(scope.row.settlementPrice) }}
            </template>
          </el-table-column>
        </el-table>
        <div v-if="billList.pumpPrice.length!==0" class="combined">小计：结算金额【{{combined(billList.pumpPrice)}}】</div>
        <div class="bill_title1">混凝土加工结算：</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billList.jiaPrice" tooltip-effect="dark">
          <el-table-column label="站点" align="center" prop="productName"></el-table-column>
          <el-table-column label="加工方量（方）" align="center" prop="signForNum"></el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="settlementMoney"></el-table-column>
        </el-table>
        <div v-if="billList.jiaPrice.length!==0" class="combined">小计：结算金额【{{combined(billList.jiaPrice)}}】</div>
        <div class="bill_title">结算合计：</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="totalList" tooltip-effect="dark">
          <el-table-column label="费用项" align="center" prop="name"></el-table-column>
          <el-table-column label="结算金额 (元)" align="center">
            <template slot-scope="scope">
              {{scope.row.settlementMoney = combined1(scope.row.price)}}
            </template>
          </el-table-column>
        </el-table>
        <div v-if="totalList.length!==0" class="combined">合计：{{combined(totalList)}}</div>
      </div>
      <span slot="footer" class="dialog-footer" style="display:flex;justify-content: space-between;">
        <div>
          <!-- <el-button class="bottom_all_two">打印结算单</el-button> -->
          <el-button class="bottom_all_two" @click="combinedSubmit(2)">提交审核</el-button>
        </div>
        <div>
          <el-button class="bottom_all_two" @click="billDeta=false">取 消</el-button>
          <el-button class="bottom_all" style="margin-left: 24px" @click="combinedSubmit(1)">保 存</el-button>
        </div>
      </span>
    </el-dialog>
    <!--选择发送的人员-->
    <!-- <el-dialog v-dialogDrag :visible.sync="userDeta" width="620px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">请选择接收账号</span>
      <div style="padding:0 10px">
        <el-checkbox-group v-model="userarr">
          <template v-for="(item,index) in useroptons">
            <el-checkbox :key="index" style="line-height:26px" :label="item.id">{{item.name}}</el-checkbox>
          </template>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="userDeta=false">取 消</el-button>
        <el-button class="bottom_all" :disabled="userarr.length==0" style="margin-left: 24px" @click="userSubmit()">发 送</el-button>
      </span>
    </el-dialog> -->
    <!-- 查看结算明细 -->
    <el-dialog v-dialogDrag :visible.sync="billDeta1" width="1180px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">外协业务结算</span>
      <div style="padding:0 10px">
        <div class="bill_title1">混凝土结算：</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billList1.hunPrice" tooltip-effect="dark">
          <el-table-column label="产品名称" align="center" prop="productName"></el-table-column>
          <el-table-column label="签收量（方）" align="center" prop="signForNum"></el-table-column>
          <el-table-column label="基本单价 (元)" align="center" prop="price"></el-table-column>
          <el-table-column label="结算单价（元）" align="center" prop="settlementPrice"></el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="settlementMoney"></el-table-column>
        </el-table>
        <div v-if="billList1.hunPrice.length!==0" class="combined">小计：结算金额【{{combined(billList1.hunPrice)}}】</div>
        <div class="bill_title1">运输结算：</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billList1.yunPrice" tooltip-effect="dark">
          <el-table-column label="运输方量(方)" align="center" prop="signForNum"></el-table-column>
          <el-table-column label="基本单价（元/方）" align="center" prop="price"></el-table-column>
          <el-table-column label="结算单价（元）" align="center" prop="settlementPrice">
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="settlementMoney">
          </el-table-column>
        </el-table>
        <div v-if="billList1.yunPrice.length!==0" class="combined">小计：结算金额【{{combined(billList1.yunPrice)}}】</div>
        <div class="bill_title1">泵送结算：</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billList1.pumpPrice" tooltip-effect="dark">
          <el-table-column label="泵送方量(方)" align="center" prop="signForNum"></el-table-column>
          <el-table-column label="基本单价（元/方）" align="center" prop="price"></el-table-column>
          <el-table-column label="结算单价（元）" align="center" prop="settlementPrice">
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="settlementMoney">
          </el-table-column>
        </el-table>
        <div v-if="billList1.pumpPrice.length!==0" class="combined">小计：结算金额【{{combined(billList1.pumpPrice)}}】</div>
        <div class="bill_title1">混凝土加工结算：</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billList1.jiaPrice" tooltip-effect="dark">
          <el-table-column label="站点" align="center" prop="productName"></el-table-column>
          <el-table-column label="加工方量（方）" align="center" prop="signForNum"></el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="settlementMoney"></el-table-column>
        </el-table>
        <div v-if="billList1.jiaPrice.length!==0" class="combined">小计：结算金额【{{combined(billList1.jiaPrice)}}】</div>
        <div class="bill_title">结算合计：</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="totalList1" tooltip-effect="dark">
          <el-table-column label="费用项" align="center" prop="name"></el-table-column>
          <el-table-column label="结算金额 (元)" align="center">
            <template slot-scope="scope">
              {{scope.row.settlementMoney = combined2(scope.row.price)}}
            </template>
          </el-table-column>
        </el-table>
        <div v-if="totalList.length!==0" class="combined">合计：{{combined(totalList1)}}</div>
      </div>
      <span slot="footer" class="dialog-footer" style="display:flex;justify-content: space-between;">
        <div>
          <el-button class="bottom_all_two" @click="outsourceexportListFun()">打印结算单</el-button>
          <el-button v-if="low.auditStatus==1" class="bottom_all_two" @click="combinedSubmit(3)">提交审核</el-button>
        </div>
        <div>
          <el-button class="bottom_all_two" @click="billDeta1=false">取 消</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  contract_list,
  queryPage1,
  createFinalStatement,
  saveFinalStatement,
  queryPage3,
  getSupplierListForsettlement,
  queryPage2,
  // queryUserByID,
  informClient,
  querySettledDetaill,
  outsourceexportList,
  updateSettledPage
} from "@/api/wise/Wise_contactsbusiness/Wise_contactsbusiness.js";
import { uploadFile } from "@/api/common.js";
import html2canvas from 'html2canvas';
export default {
  mixins: [mixin],
  data() {
    return {
      pagesLoading: false,
      /*表格增删改查及下载接口*/
      queryPage: '',
      /*表格数据*/
      table: [],
      table1: [
        { label: "外协单位", width: "auto", prop: "outsourcingUnit", status: true },
        { label: "订单号", width: "auto", prop: "orderNo", status: true },
        { label: "运输号", width: "auto", prop: "code", status: true },
        { label: "车牌号", width: "auto", prop: "carNo", status: true },
        { label: "协作站点", width: "auto", prop: "station", status: true },
        { label: "产品名称", width: "auto", prop: "productName", status: true },
        { label: "生产票面量(方)", width: "auto", prop: "faceValue", status: true },
        { label: "生产日期", width: "auto", prop: "proTime", status: true },
        { label: "产品单价（元/方）", width: "auto", prop: "unitPrice", status: true },
        { label: "混凝土生产费用(元)", width: "auto", prop: "productCost", status: true },
        { label: "加工单价(元/方)", width: "auto", prop: "processingUnitPrice", status: true },
        { label: "混凝土加工费用(元)", width: "auto", prop: "processingCost", status: true },
        { label: "运输距离(千米)", width: "auto", prop: "transportDistance", status: true },
        { label: "运输单价(元/方)", width: "auto", prop: "transportPrice", status: true },
        { label: "混凝土运输费用(元)", width: "auto", prop: "transportCost", status: true },
        { label: "浇筑方式", width: "auto", prop: "pouringWay", status: true },
        { label: "高度/臂长(米)", width: "auto", prop: "height", status: true },
        { label: "浇筑量（方）", width: "auto", prop: "num", status: true },
        { label: "泵送单价(元/方)", width: "auto", prop: "price", status: true },
        { label: "泵送时间", width: "auto", prop: "createTime", status: true },
        { label: "泵送费用（元）", width: "auto", prop: "zongCost", status: true },
        { label: "结算金额 (元)", width: "auto", prop: "settlementAmount", status: true },
      ],
      table2: [
        { label: "外协单位", width: "auto", prop: "outsourcingUnit", status: true },
        { label: "订单号", width: "auto", prop: "orderNo", status: true },
        { label: "运输号", width: "auto", prop: "code", status: true },
        { label: "车牌号", width: "auto", prop: "carNo", status: true },
        { label: "协作站点", width: "auto", prop: "station", status: true },
        { label: "产品名称", width: "auto", prop: "productName", status: true },
        { label: "生产票面量(方)", width: "auto", prop: "faceValue", status: true },
        { label: "生产日期", width: "auto", prop: "proTime", status: true },
        { label: "产品单价（元/方）", width: "auto", prop: "unitPrice", status: true },
        { label: "混凝土生产费用(元)", width: "auto", prop: "productCost", status: true },
        { label: "加工单价(元/方)", width: "auto", prop: "processingUnitPrice", status: true },
        { label: "混凝土加工费用(元)", width: "auto", prop: "processingCost", status: true },
        { label: "运输距离(千米)", width: "auto", prop: "transportDistance", status: true },
        { label: "运输单价(元/方)", width: "auto", prop: "transportPrice", status: true },
        { label: "混凝土运输费用(元)", width: "auto", prop: "transportCost", status: true },
        { label: "浇筑方式", width: "auto", prop: "pouringWay", status: true },
        { label: "高度/臂长(米)", width: "auto", prop: "height", status: true },
        { label: "浇筑量（方）", width: "auto", prop: "num", status: true },
        { label: "泵送单价(元/方)", width: "auto", prop: "price", status: true },
        { label: "泵送时间", width: "auto", prop: "createTime", status: true },
        { label: "泵送费用（元）", width: "auto", prop: "zongCost", status: true },
        { label: "结算金额 (元)", width: "auto", prop: "settlementAmount", status: true },
        { label: "结算单号", width: "auto", prop: "balanceNo", status: true },
      ],
      table3: [
        { label: "序号", width: "50", prop: "", status: true },
        { label: "结算单号", width: "120", prop: "id", status: true },
        { label: "外协单位", width: "auto", prop: "supplierName", status: true },
        { label: "结算时间段", width: "120", prop: "settlementPeriod", status: true },
        { label: "结算总金额（元）", width: "auto", prop: "money", status: true },
        { label: "提交时间", width: "120", prop: "createTime", status: true },
        { label: "内部审核状态", width: "120", prop: "", status: true },
        { label: "操作", width: "auto", prop: "", status: true },
        { label: "供应商确认", width: "120", prop: "", status: true },
      ],
      pagesType: 0,
      /**导航栏*/
      navlist: [
        {
          value: "待结算",
          id: 1,
        },
        {
          value: "已结算",
          id: 2,
        },
        {
          value: "结算单",
          id: 3,
        },
      ],
      currenindex: 1,
      /**时间*/
      datePicker: [],
      /**搜索条件1*/
      searchText: '',
      search: false,
      searchData: [],
      searchradio: '',
      /**生成结算的数据*/
      generate: {
        list: [],
        startTime: '',
        endTime: '',
        contractId: ''
      },
      /*结算单详情*/
      billDeta: false,
      billDetails: {},
      billList: {
        jiaPrice: [],
        pumpPrice: [],
        yunPrice: [],
        hunPrice: []
      },
      totalList: [
        { name: '混凝土费用', price: 'hunPrice', settlementMoney: 0 },
        { name: '泵送费用', price: 'pumpPrice', settlementMoney: 0 },
        { name: '运输费用', price: 'yunPrice', settlementMoney: 0 },
        { name: '加工费用', price: 'jiaPrice', settlementMoney: 0 }
      ],
      SupplierList: [],
      /**发送*/
      userDeta: false,
      useroptons: [],
      userarr: [],
      low: {},
      /**结算明旭*/
      billDeta1: false,
      billList1: {
        jiaPrice: [],
        pumpPrice: [],
        yunPrice: [],
        hunPrice: []
      },
      totalList1: [
        { name: '混凝土费用', price: 'hunPrice', settlementMoney: 0 },
        { name: '泵送费用', price: 'pumpPrice', settlementMoney: 0 },
        { name: '运输费用', price: 'yunPrice', settlementMoney: 0 },
        { name: '加工费用', price: 'jiaPrice', settlementMoney: 0 }
      ],
    };

  },
  mounted() {

  },
  watch: {
    /**导航切换*/
    currenindex: {
      handler() {
        this.tableData = []
        this.datePicker = []
        this.tableParam = this.$options.data().tableParam
        if (this.currenindex == 1) {
          this.searchText = ''
          this.table = this.table1;
          this.queryPage = queryPage1
          this.tableParam.pageSize = 99999999
        }
        if (this.currenindex == 2) {
          this.tableParam.type = 1
          this.table = this.table2;
          this.getsearchData()
          this.queryPage = queryPage2
          this.gettableData()
        }
        if (this.currenindex == 3) {
          this.table = this.table3;
          this.tableParam.type = 1
          this.queryPage = queryPage3
          this.getsearchData()
          this.gettableData()
        }
        this.pagesLoading = false
        //此处为执行的函数或者方法
      },
      deep: false,
      immediate: true,
    },
    /**时间选择*/
    datePicker() {
      if (this.datePicker) {
        this.tableParam.createTime = this.datePicker[0]
        this.tableParam.updateTime = this.datePicker[1]
      } else {
        this.tableParam.createTime = ''
        this.tableParam.updateTime = ''
      }
    },
    /**table1默认全选*/
    tableData() {
      if (this.tableData.length !== 0 && this.currenindex == 1) {
        this.$refs.table.toggleAllSelection()
        this.generate.createTime = this.tableParam.createTime
        this.generate.updateTime = this.tableParam.updateTime
      }
    },
  },
  methods: {
    init() {
      this.tableData = []
      this.datePicker = []
      this.tableParam = this.$options.data().tableParam
      if (this.currenindex == 1) {
        this.tableParam.pageSize = 99999999
      }
      this.gettableData()
    },
    /**结算信息合计*/
    combined(arr) {
      let num = 0
      arr.forEach(res => {
        num = Number(res.settlementMoney) + num
      })
      return num.toFixed(2)
    },
    /**结算信息合计*/
    combined1(index) {
      let num = 0
      this.billList[index].forEach(res => {
        num = Number(res.settlementMoney) + num
      })
      return num.toFixed(2)
    },
    combined2(index) {
      let num = 0
      this.billList1[index].forEach(res => {
        num = Number(res.settlementMoney) + num
      })
      return num.toFixed(2)
    },
    /**导航栏切换*/
    choose(pages) {
      this.pagesLoading = true
      this.currenindex = pages;
    },
    /**获取对应的搜搜添加*/
    getsearchData() {
      let _this = this
      if (_this.currenindex == 1) {
        contract_list({ contractTypeId: 5 }).then(res => {
          console.log(res.data)
          this.searchData = res.data
        })
      }
      if (_this.currenindex == 2) {
        getSupplierListForsettlement().then(res => {
          console.log(res.data)
          if (res.data) {
            this.SupplierList = res.data
          }
        })
      }
      if (_this.currenindex == 3) {
        getSupplierListForsettlement().then(res => {
          console.log(res.data)
          if (res.data) {
            this.SupplierList = res.data
          }
        })
      }
    },
    /**合同列表选中*/
    setradio(data) {
      this.searchradio = JSON.stringify(data)
    },
    /**确定选择运输合同*/
    submitsearch() {
      this.tableParam.id = JSON.parse(this.searchradio).contractId
      this.searchText = JSON.parse(this.searchradio).contractNumber + '-' + JSON.parse(this.searchradio).supplierName
      this.search = false
    },
    /**查询 */
    pagesgettableData() {
      this.gettableData()
    },
    /**表格选中数据*/
    tableChange(val) {
      this.generate.list = val
      this.generate.createTime = this.tableParam.createTime
      this.generate.updateTime = this.tableParam.updateTime
    },
    /**生成结算单*/
    statements() {
      createFinalStatement(this.generate.list).then(res => {
        this.billList = res.data
        //this.billDetails.outsourcingUnit = JSON.parse(this.searchradio).supplierName
        this.billDetails.createTime = this.generate.createTime
        this.billDetails.updateTime = this.generate.updateTime
        this.billDeta = true
        console.log(res.data)
      })

    },
    /**提交结算单*/
    combinedSubmit(type) {
      let _this = this
      if (type == 3) {
        _this.$router.push({ name: "sign_Wise_contactsbusiness1", query: { id: this.low.id, type: 1 } });
        return
      }
      new Promise(resolve => {
        html2canvas(self.$refs.html).then((canvas) => {
          canvas.toBlob((blob)=>{
            const file = new File([blob], '结算截图.jpg', {type: 'image/jpg'});
            const params = new FormData();
            params.append('file', file);
            uploadFile(params).then(res => {
              if (res.code === 1001) {
                resolve(res.data.fileUrl)
              }
            })
          })
        })
      }).then(value => {
        let data = {
          ..._this.billList,
          settlementPeriod: _this.billDetails.createTime + '-' + _this.billDetails.updateTime,
          money: _this.combined(_this.totalList),
          type: 1,
          auditStatus: 1,
          imgUrl: value
        }
        saveFinalStatement(data).then(res => {
          if (res.code == 1001) {
            _this.billDeta = false
            if (type == 2) {
              _this.$router.push({ name: "sign_Wise_contactsbusiness1", query: { id: res.data.id, type: 1 } });
              return
            }
            _this.gettableData()
          }
        })
      })
    },
    show(low) {
      this.low = low
      querySettledDetaill({ id: low.id }).then(res => {
        if (res.code == 1001) {
          this.billList1 = res.data
          this.billDeta1 = true
        }
      })
    },
    /**结算单发给供应商*/
    // send(low) {
    //   this.low = low
    //   this.userarr = []
    //   this.useroptons = []
    //   queryUserByID({ id: low.contractId }).then(res => {
    //     this.useroptons = JSON.parse(res.data)
    //     this.userDeta = true
    //   })
    //   // send_to_customer(low).then(() => {
    //   //   this.gettableData()
    //   // })
    // },
    async userSubmit(low) {
      this.$confirm('确认发送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'bottom_all_two',
        confirmButtonClass: 'bottom_all',
        type: 'warning'
      }).then(async () => {
        let json = {
          contractId: low.contractId,
          type: 1,
          settlementId: low.id,
          settlementNo: low.code,
          times: low.settlementPeriod,
          money: low.money,
          applyForTime: low.createTime,
          imgUrl: low.imgUrl,
        }
        // let arr = this.userarr.map(res => (new useritem(res)))
        informClient(json).then(res => {
          if (res.code == 1001) {
            updateSettledPage({ id: low.id, outerStatus: 1 }).then(() => { })
            this.$message({
              message: '发送成功',
              type: 'success'
            });
            this.gettableData()
            this.userDeta = false
          }
        })
      })
    },
    outsourceexportListFun() {
      let json = { id: this.low.id }
      this.$Download(outsourceexportList, json);
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.pagesgettableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.dialoginfo {
  padding: 20px 20px 0 20px;
  max-height: 400px;
  overflow: auto;
}
.tabtop {
  width: 571px;
}
.el-input,
.el-select {
  width: 240px;
}
/*
 <el-link class="table_link" :underline="false">查看配合比</el-link>*/
.table_link {
  margin: 0 10px;
  color: $bg_color;
  cursor: pointer;
}

.table_link:hover {
  opacity: 0.8;
}
.bill_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    font-weight: 600;
    color: #000;
  }
}
.bill_title {
  font-size: 18px;
  font-weight: 600;
  padding: 15px 0;
}
.bill_title1 {
  font-size: 18px;
  font-weight: 600;
  padding: 20px 0;
}
.bill_subtitle {
  padding: 20px 0;
  > span {
    padding-right: 20px;
  }
  .text {
    color: #000;
  }
}
.combined {
  border: 1px solid #ebeef5;
  text-align: center;
  line-height: 40px;
}
</style>
